/* eslint-disable import/first */
/* eslint-disable jsx-quotes */
// import React, { Component } from 'react'
// import { useState } from "react";
import { View, RichText } from "@tarojs/components";
import Taro, { useDidShow, useShareAppMessage } from "@tarojs/taro";
// import { AtFab } from "taro-ui";
// import { ShareSheet } from "@antmjs/vantui";
// import share from "../../../static/share.png";
// import love from "../../../static/love.png";
import "./popular_science_article.scss";
// eslint-disable-next-line import/first
import "@antmjs/vantui/es/share-sheet/style";
import { AtIcon } from "taro-ui";
import { useState } from "react";

const Popular_science_article = () => {
  const datas = Taro.getStorageSync("pageDetail");
  const [data, setData] = useState<any>([]);
  const { OPENID } = Taro.getStorageSync("wxContext");

  // if (!isEmpty(data)) {
  //   data[0].content = data[0].content.replace(
  //     regex,
  //     `<img style="max-width: 100%;margin:10px 0"`
  //   );
  // }
  // // Taro.setNavigationBarTitle({ title: data.title });

  useDidShow(() => {
    articleshow();
  });

  const collection = (value: any, status: string) => {
    // setRight(!isRight);
    Taro.showLoading();
    // console.log(data);

    Taro.cloud
      .callFunction({
        name: "logins",
        data: {
          $url: "addScienceCollect",
          data: value
        }
      })
      .then((res: any) => {
        Taro.showToast({
          title: "收藏成功",
          icon: "none"
        });
        articleshow();
        Taro.hideLoading();
      });
  };

  const articleshow = () => {
    console.log(data);
    Taro.cloud
      .callFunction({
        name: "logins",
        data: {
          $url: "searchArticleContent",
          _id: datas._id
        }
      })
      .then((res: any) => {
        // debugger
        setData(res.result.data);
      });
  };

  useShareAppMessage((res: any) => {
    console.log(res);
    return {
      title: data.title,
      path:
        "/pages/popular_science/Popular_science_article/Popular_science_article"
    };
  });

  return (
    <View className="box">
      <View className=".at-article__h1">{data.title}</View>
      <View className="content">
        <RichText className="rich-text" nodes={data.content} />
      </View>

      <View className="bnt">
        <View className="fabfirst">
          {/* <AtFab onClick={ButtonClick} size="small"> */}
          {/* <Image src={share} className="share" onClick={() => handleClick()} /> */}
          {/* <Text className="at-fab__icon at-icon at-icon-message"></Text> */}
          {/* </AtFab> */}
        </View>

        <View className="fabsecond">
          <AtIcon
            className="heart"
            value="heart-2"
            size="30"
            color={
              data.openId && data.openId.indexOf(OPENID) > -1 ? "#f00" : "#000"
            }
            onClick={() =>
              collection(
                data,
                data.openId.indexOf(OPENID) > -1 ? "delete" : "add"
              )
            }
          />
        </View>
      </View>
      {/* <ShareSheet
        show={showShare}
        title="立即分享给好友"
        options={options}
        onSelect={onSelect}
        onClose={onClose}
      /> */}
    </View>
  );
};
export default Popular_science_article;
